#{set title:'Home' /}

#{if isLoggedIn}
#{extends 'logged_user.html' /}

<div class="post" style=" border:0px solid green; width:98%">     
  <div class="user_tabs" style="margin-top:30px; border:opx solid red">
    <ul>
      <li>
        <a href="#" no="1"> New Bees</a>
      </li> 
      <li>
        <a href="#" class="active" no="2">Fivester</a>
      </li>
          <li>
        <a href="#" no="4">Rater</a>
      </li>
    </ul>
     
  </div>
  
  <div class="index_tab_content" id="index_tab_content_1" style="display:none">
    <div class="active_users">    	
         #{if users_new_bee}
		  #{list items:users_new_bee, as:'usr'}		
		  <label style="display:block;padding-left:15px;text-indent:-15px;padding-top:4px;">  
		    &nbsp;&nbsp;&nbsp;
		${usr.email}, comes as new bee ${usr.newbie}, 

			</label>
			  #{/list}
		#{/if}
    	#{else}
      		<p>No one has achieved New Bee status.</p>
      	#{/else}
    </div>
  </div>
  
  <div class="index_tab_content" id="index_tab_content_2" style="display:block">
    <div class="active_users">    	
     #{if fivester}
		#{list items:fivester, as:'usr'}		
		<label style="display:block;padding-left:15px;text-indent:-15px;padding-top:4px;">  
		    &nbsp;&nbsp;&nbsp;
		${usr.email}, comes as Fivester ${usr.fivester}, 
        </label>
		#{/list}
		#{/if}
    	#{else}
      		<p>No one has achieved Fivester status.</p>
      	#{/else}
    </div>
  </div>
  

  
  <div class="index_tab_content" id="index_tab_content_4"  style="display:none">
    <div class="active_users">    	
         #{if rater}
		  #{list items:rater, as:'usr'}		<label style="display:block;padding-left:15px;text-indent:-15px;padding-top:4px;">  
		    &nbsp;&nbsp;&nbsp;
		${usr.email}, comes as Rater ${usr.rater}, 

			</label>
			  #{/list}
		#{/if}
    	#{else}
      		<p>No one has achieved Rater status.</p>
      	#{/else}
    </div>
  </div>
</div>

<div class="postalt" style="border:0px solid green; width:98%">
<div class="user_tabs" style="margin-top:30px; border:opx solid red; text-align:middle; width:100%">
  <div class="tag_cloud_big linearBg2" style="border:0px solid green; width:360px; display:inline-block; text-align: center; ">
  <h4>Offers in Clouds</h4>    
</div>
<div class="tag_cloud_big linearBg2" style="border:0px solid green; width:360px; display:inline-block; text-align: center; ">
  <h4>Requests in Clouds</h4>    
</div>
  </div>

<div class="index_tab_content3" id="index_tab_content_1" style="width:99.5%">
<div class="tag_cloud_big linearBg2" style="border:0px solid green; width:350px; display:inline-block; text-align: center; vertical-align:top;"><br/>
    <ul>
        #{list items:tagOffersCloud, as:'tagItem'}
        <li class = "${tagItem.CssClass}">  
            <a href="@{BingoSearch.results()}?query=${tagItem.name}&type=Offer" style="color:#147DB6">${tagItem.name}</a>          
        </li>
        #{/list}
    </ul><br/>  
</div>
<div class="tag_cloud_big linearBg2" style="border:0px solid green; width:350px; display:inline-block;text-align:center; vertical-align:top; "><br/>
    <ul>
        #{list items:tagRequestsCloud, as:'tagItem'}
        <li class = "${tagItem.CssClass}">  
         	<a href="@{BingoSearch.results()}?query=${tagItem.name}&type=Request" style="color:#147DB6">${tagItem.name}</a>
        </li>
        #{/list}
    </ul><br/>
</div>
</div>
</div>
#{/if}

#{else}
#{extends 'unlogged_user.html' /}
<style>
.linearBg2 {
  /* fallback */
  background-color: #eee;
  background: url(images/linear_bg_2.png);
  background-repeat: repeat-x;
  
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
  
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #eee, #fff);
  
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #eee, #fff);
  
  /* IE 10 */
  background: -ms-linear-gradient(top, #eee, #fff);
  
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #eee, #fff);
}
.linearBg2 a {
color:#2c76a5;
}
</style>
<div class="post" style="padding:top:0px">
  <h3 style="padding-top:0px;">Recent HandShakes</h3>
  #{if newHandshakes}
  <table>
    <th>Title</th>
    <th>Offerer</th>
    <th>Requester</th>
    <th>Social Credits Made</th>
    <th></th>
    #{list items:newHandshakes, as:'handshake'}
    <tr>
      #{if handshake.isOriginallyAnOffer}
      <td>${handshake.offer.title}</td>
      #{/if}
      #{else}
      <td>${handshake.request.title}</td>
      #{/else}
      <td>${handshake.offer.user.fullname}</td>
      <td>${handshake.request.user.fullname}</td>
      <td>${handshake.offer.creditOffer}</td>
      <td><a href="@{Handshakes.show(handshake.id)}">Details</a></td>
    </tr>
    #{/list}
  </table>
  
  
  #{/if}
  #{else}
  <p>
    There are no recent handshakes.
  </p>
    
  #{/else}

</div>
<div class="postalt" style="border:0px solid green; width:98%">
<div class="user_tabs" style="margin-top:30px; border:opx solid red; text-align:middle; width:100%">
  <div class="tag_cloud_big linearBg2" style="border:0px solid green; width:360px; display:inline-block; text-align: center; ">
  <h4>Offers in Clouds</h4>    
</div>
<div class="tag_cloud_big linearBg2" style="border:0px solid green; width:360px; display:inline-block; text-align: center; ">
  <h4>Requests in Clouds</h4>    
</div>
  </div>

<div class="index_tab_content3" id="index_tab_content_1" style="width:99.5%">
<div class="tag_cloud_big linearBg2" style="border:0px solid green; width:350px; display:inline-block; text-align: center; vertical-align:top;">
       <br/>
       <ul>          
        #{list items:tagCloudBigOffer, as:'tagItem'}
        <li class = "${tagItem.CssClass}">  
           <a href="${tagItem.hyperlink}" style="color:gray">${tagItem.name}</a>          
        </li>
        #{/list}
       </ul>   
       <br/>  
</div>
<div class="tag_cloud_big linearBg2" style="border:0px solid green; width:350px; display:inline-block;text-align:center; vertical-align:top; ">
     <br/>
     <ul>        
        #{list items:tagCloudBigRequest, as:'tagItem'}
         <li class = "${tagItem.CssClass}">  
            <a href="${tagItem.hyperlink}" style="color:gray">${tagItem.name}</a>
        </li>
        #{/list}
       </ul> 
       <br/>
</div>
</div>
</div>
#{/else}

#{if recommendedServices}
<br>
<div>
	<h3><span>Recommended Services Matching Your Profile</span></h3>

		<table style="width:92%">
			  <tr>
			    <th>Title</th>
			    <th>Offerer</th>
			    <!--  <th>Valid Until</th> -->
			    <!--  <th>Social Credits Required</th> -->
			    <th>Type</th>
			    <!-- <th>Relevancy</th> -->
			  </tr>
			  
			  #{list recommendedServices, as:'recService'}
			  <tr>
			    <td>
			    	#{ifnot recService.IsOffer}
			    		<a href="@{Offers.showDetails(recService.id)}">${recService.title}</a>
			    	#{/ifnot}
			    	#{else}
				    	<a href="@{Requests.showDetails(recService.id)}">${recService.title}</a>
				    #{/else}
			    </td>
			    <td>${recService.owner.fullname}</td>
			    <!--
			    #{if recService.endsAt}
			    <td>${recService.endsAt.format('dd MMMM yyyy')}</td>
			    #{/if}
			    #{else}
			    <td>-</td>
			    #{/else}    
			    <td>${recService.getCredits().forRequester()}</td>
			    -->
			    <td>
				    #{ifnot recService.IsOffer}
				    	Offer
				   	#{/ifnot}
				    #{else}
				    	Request
				    #{/else}
			    </td>
			   <!-- <td><b>${recService.Relevancy}</b></td> -->
			  </tr>
			  #{/list}
			  
		</table>
	
	<!--
	<ul>
		<li>${recService.title}
			<a href="@{Handshakes.show(recService.id)}">Details</a>
			<b>${recService.Relevancy}</b>
		</li>
	</ul>
	-->

</div>
#{/if}

<script>
var clickIndex = 1;

var tid = setTimeout(mycode, 3000); 
function mycode() { 
	 clickIndex ++;
	 if (clickIndex == 5) clickIndex = 1;
	 
	 $('#user_tab_a_' + clickIndex.toString()).click();
	 tid = setTimeout(mycode, 3000); 
} 

function abortTimer() 
{ 		 
	clearTimeout(tid); 
} 
</script>
